<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名：<input type="text">
    <br/>
    密码：<input type="text">
    <br/>
    验证码：<input type="text" id="yan"><span id="yanzhengma">获取验证码</span>
    <br/>
    <input type="button" value="登录" id="btn"><span id="tip"></span>
</body>

</html>
<script>
    window.onload = function () {
        var spans = document.getElementById("yanzhengma")
        var tips =document.getElementById("tip")
        var yans =document.getElementById("yan") 
        spans.onclick = function () {
            // 这个数组里保存着：16进制所需要的数字和字母
            var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];

            // 定义一个空字符串，保存验证码
            var str = "";
            for (var i = 0; i < 4; i++) {
                // 随机一个合法的下标
                var index = parseInt(Math.random() * arr.length);
                str += arr[index]; //str = str + arr[index];
            }
            
            spans.innerHTML = str
            console.log(str);
            
        }
         console.log(123)
        // var jie = getCode(6)
        
        // spans.innerHTML = jie
        // console.log(jie)
        btn.onclick =function(){
            
            if(yans.value===spans.innerHTML){
                spans.style.color = "green"
                tips.innerHTML="√"
                yans.value=""
            }else{
                spans.style.color="red"
                tips.innerHTML="x,请重试"
                yans.value=""
            }
        }

        
        
        
        
    }
</script>